<!doctype html>
<html>
<head>
    <title>外教君-TPO训练</title>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="./css/reset.css">
    <link rel="stylesheet" type="text/css" href="./css/buy.css">
</head>
<body>
<div id="wrap">
    <img class="TpoImg" :src="tpoimgurl" alt="">
    <button class="TryClass" @click="tryFun(3)">试听</button>
    <div class="bottom_bar">
        <div v-show="nowPrice" class="price">
            <p class="oldPrice">原价:199元</p>
            <p class="nowPrice">
                <span class="nowPriceTitle">受邀专享</span><br>
                <span class="nowPriceSize">169元</span>
            </p>
        </div>
        <div v-show="TimePrice" class="price">
            <p class="TimePrice">限时售价199元</p>

        </div>
        <button class="BuyBtn" @click="HttpDataFun">立即购买</button>
    </div>

</div>
</body>
</html>
<script src="./js/basis.js"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" charset="utf-8"></script>
<script src="js/vue-router.js" charset="utf-8"></script>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    console.log(location.href.split('#')[0]);
//     已进入该页面首先判断是否已经购买，因为当用户支付后（不管成功与否）会再次返回该页面，因此需要在此判断是否购买成功
        $.ajax({ url:'/tpo/payment/isPay',
            type: "POST",
            data:{url:""+thisPageUrl},
            dataType: "json",
            //sync: true,
            cache: false,//解决三星手机，缓存后不提交请求
            success: function(data){
                if (data.status == 200) {
                    // 如果购买过了，跳转到首页
                    if (data.data.isPay == 1) {
                        window.location.href = 'home.html'
                    }
                }
                else if (res.data.status == 400) {
                    alert(res.data.message)
                } else if (res.data.status == 500) {
                    alert(res.data.message)
                }else{
                    window.location.href = 'index.html';
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                console.log(XMLHttpRequest.responseText);
            }
        });

    var vm = new Vue({
        el: '#wrap',
        data: {
            nowPrice: true,
            TimePrice: false,
            tpoimgurl: './img/TPOImg.png',

        },
        created: function () {
            this.$http.post(URL + '/tpo/payment/isScanQrCode/', {}).then(function (res) {
                console.log(res)
                if (res.data.data == 0) {
                    this.nowPrice = false;
                    this.TimePrice = true;
                } else if (res.data.data == 1) {
                    this.nowPrice = true;
                    this.TimePrice = false;
                }
            }, function (res) {

            })
        },
        methods: {
            HttpDataFun: function () {
                this.$http.post(URL + '/tpo/payment/createOrder/', {}).then(function (obj) {
                    var params = obj.data;
//                    alert(JSON.stringify(params));
                    if (params.status != 200) {
                        alert("创建订单失败:" + params.message);
                    } else {
                        //alert("params:"+params);
                        //调用微信H5支付接口
                        wx.chooseWXPay({
                            timestamp: params.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: params.data.nonceStr, // 支付签名随机串，不长于 32 位
                            package: params.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                            signType: params.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: params.data.paySign, // 支付签名
                            success: function (res) {
                                if (res.errMsg == "chooseWXPay:ok") {
                                    //支付成功
                                    alert("支付成功！");
                                    window.location.href = 'home.html';
                                } else {
                                    //支付失败 取消订单
                                    $rootScope.wxstore.showAlert("支付失败！");
                                }
                            },
                            cancel: function (res) {
                                //支付取消
                                $rootScope.wxstore.showAlert("支付取消！");
                            },
                            fail: function (res) {
                                $rootScope.wxstore.showError("支付失败！");
                            },
                            complete: function (res) {
                                //$rootScope.wxstore.showAlert("complete!");
                            }
                        });
                    }
                }, function () {
                    alert("create order http error");
                })
            },
            tryFun: function (data) {
                //点击试听
                window.location.href = 'type.html?id=' + data;
            }
        }

    })

</script>
